<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>

html { position: absolute; }
body {
    margin: 0;
    height: 2000px;
}
#container {
    position: absolute;
    left: 0;
    top: 50px;
    width: 700px;
    height: 2000px;
}
#target {
    margin-top: 150px;
    margin-left: 100px;
    width: 200px;
    height: 100px;
    background: silver;
}

</style>
<div id="container">
  <div id="target"></div>
</div>
<script>

  function run(zoom, scroll) {
    if (!window.testRunner)
      return;
    testRunner.setPageZoomFactor(zoom);
    scrollTo(0, scroll);
    var result;
    var target = document.querySelector("#target");
    var rect = target.getBoundingClientRect();
    target.addEventListener("click", (event) => {
        result = [event.offsetX, event.offsetY, event.layerX, event.layerY];
    });
    eventSender.mouseMoveTo(
        (rect.left + rect.width / 2) * zoom,
        (rect.top + rect.height / 2) * zoom);
    eventSender.mouseDown();
    eventSender.mouseUp();
    // layerX and layerY are relative to #container
    assert_array_approx_equals(result, [100, 50, 200, 200], 5);
}

test(() => { run(1, 0); }, 'no zoom or scroll');
test(() => { run(1, 100); }, 'scroll without zoom');
test(() => { run(2, 0); }, 'zoom without scroll');
test(() => { run(2, 100); }, 'zoom and scroll');

</script>
